<template>
  <div class="overview-container">
    <div class="overview-content">
      <div class="overview-list grid grid-cols-5">
        <div class="overview-item" v-for="(item, index) in serviceList" :key="index" @click="onOverviewItemClick(item)">
          <img :src="item.url" alt="" />
          <img class="status" :src="item.statusUrl" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { epAddedServiceBrief } from '@/api/finance/reversePriceWriting'
  import { usePermission } from '@/hooks/usePermission'
  import { Message } from '@arco-design/web-vue'
  const router = useRouter()
  // 增值服务概述
  const serviceOpenStatus = ref({})
  // 获取增值服务开通情况
  const getServiceConfig = () => {
    epAddedServiceBrief({}).then((res) => {
      const result = res.result
      serviceOpenStatus.value = result
    })
  }
  getServiceConfig()

  // 增值服务列表
  const serviceList = computed(() => {
    // 根据增值服务开通状态展示不同的 status 图
    const getStatusUrl = (prop) => {
      const status = serviceOpenStatus.value[prop] || 0
      return `/static/images/overview/status_${status}.png`
    }
    return [
      { type: 'etc', permission: 'svms:asstes:equipment:etc', url: '/static/images/overview/etc.png', statusUrl: getStatusUrl('etc') },
      {
        type: 'tbox',
        permission: 'svms:asstes:device:car-box-business',
        url: '/static/images/overview/tbox.png',
        statusUrl: getStatusUrl('tbox'),
      },
      {
        type: 'econtract',
        permission: 'svms:value-added:contract:settings',
        url: '/static/images/overview/econtract.png',
        statusUrl: getStatusUrl('econtract'),
      },
      {
        type: 'aggregate_payment',
        permission: 'svms:value-added:third-payments:polymerisation',
        url: '/static/images/overview/aggregate_payment.png',
        statusUrl: getStatusUrl('jialianPay'),
      },
      {
        type: 'channel_price_sync',
        permission: 'svms:value-added:reverse-price-writing',
        url: '/static/images/overview/channel_price_sync.png',
        statusUrl: getStatusUrl('channelPriceSync'),
      },
      {
        type: 'violation_inquiry',
        permission: 'svms:value-added:violation-inquiry',
        url: '/static/images/overview/violation_inquiry.png',
        statusUrl: getStatusUrl('ifOpenViolation'),
      },
      {
        type: 'ocr_identification',
        permission: 'svms:value-added:ocr-identification',
        url: '/static/images/overview/ocr_identification.png',
        statusUrl: getStatusUrl('ocr'),
      },
    ]
  })

  // 点击增值服务
  const onOverviewItemClick = (item) => {
    const type = item.type
    const permission = item.permission
    if (usePermission(permission)) {
      switch (type) {
        case 'etc':
          router.push('/value-added/etc/device')
          break
        case 'tbox':
          router.push('/value-added/device/car-box-business')
          break
        case 'econtract':
          router.push('/value-added/contract/settings')
          break
        case 'aggregate_payment':
          router.push('/value-added/thirdPayment/aggregation')
          break
        case 'channel_price_sync':
          router.push('/value-added/reverse-price-writing')
          break
        case 'violation_inquiry':
          router.push('/value-added/violation-inquiry')
          break
        case 'ocr_identification':
          router.push('/value-added/ocr-identification')
          break
      }
    } else {
      // Message.warning(`未开通该服务`)
      Message.warning(`您没有访问该页面的权限 `)
    }
  }
</script>

<style lang="less" scoped>
  .overview-container {
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #fff;
    .overview-content {
      min-height: 100%;
      background-image: url('/static/images/overview/background.png');
      background-position: 0 0;
      background-size: 100%;
      background-repeat: no-repeat;
      padding: 0 30px;
      display: flex;
      align-items: center;
      .overview-list {
        width: 100%;
        // display: flex;
        // justify-content: space-between;
        .overview-item {
          width: 200px;
          height: 234px;
          position: relative;
          border-radius: 16px;
          overflow: hidden;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-bottom: 30px;
          .status {
            position: absolute;
            right: 0;
            top: 0;
            width: 80px;
            height: 36px;
          }
        }
        .overview-item:hover {
          transform: translateY(-20px);
          box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
        }
      }
    }
  }
</style>
